<template>
	<view >
		<nav-bar title="购物车"></nav-bar>
		<scroll-view scroll-y style="width: 100%;">
			<view class="flexJcac">
				<view class="shoppCar">
					<view class="name">
						门店名称
					</view>
					<view class="shoppCar_con flex" v-for="(item,index) in dataList" :key="index">
						<image class="img" :src="baseImgUrl + 'img_common_tech.png'" alt="" />
						<view class="flex1">
							<view class="flexjsbac technicianName">
								<text>{{item.name}}</text>
							</view>
							<view class="flexjsbac list_con">
								<view class="flexJcac">
									<text class="integral">
										<text class="interal_title">{{item.jf}}</text>
										<text>积分</text>
									</text>
									+
									<text>￥{{item.je}}</text>
								</view>
								
							</view>
							<view class="flex" style="justify-content: flex-end;">
								<step :num.sync="item.num"></step>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="btn_bott flexjsbac">
			<view class="num_integral">
				<text style="margin: 0 10rpx;">已选商品:&nbsp;{{totalPrice.num}}</text>
				<text>共计{{totalPrice.integral}}积分+￥{{totalPrice.price}}</text>
			</view>
			<view class="btn btn_sub" @click="submit">
				结算
			</view>
		</view>
	</view>
</template>

<script>
	import NavBar from '@/components/nav-bar/index.vue'
	import step from './components/step'
	import pageConfig from '@/config'
	export default {
		components:{ NavBar, step},
		data(){
			return{
				baseImgUrl: pageConfig.baseImgUrl,
				mainHeight:'',
				// totalPrice:0,
				totalNum:0,
				dataList:[
					{
						name:'橙皮精油农药助剂厂家直发30',
						jf:1000,
						je:30,
						num:2
					},
					{
						name:'橙皮精油农药助剂厂家直发40',
						jf:12000,
						je:40,
						num:3
					},
				]
			}
		},
		computed:{
			totalPrice:function(){
				let price = 0
				let num = 0
				let integral = 0
				this.dataList.forEach(item=>{
					price += (item.num*item.je)
					num += item.num
					integral += item.num*item.jf
				})
				return {price:price, num:num, integral:integral}
				
			}
		},
		created() {
			this.mainHeight = this.$store.getters.heightData.mainHeight
		},
		methods:{
			submit(){
				console.log(this.totalPrice)
			}
		}
		}
</script>

<style lang="scss" scoped>
	:root{
		--s:39rpx;
	}
	.btn_bott{
		position: fixed;
		width: 100%;
		bottom: 0;
		height: 148rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -2rpx 13rpx  #ADADAD;
		padding: 24rpx;
		.num_integral{
			color: #C27E15;
		}
		.btn_sub{
			width: 178rpx;
			color: #FFFFFF;
			background-color: #C27E15;
		}
	}
	.shoppCar{
		width: 673rpx;
		opacity: 1;
		border-radius: 17rpx;
		background: #FFFFFF;
		padding: var(--s);
		margin: var(--s);
		.name{
			font-size: 34rpx;
			font-weight: 500;
			color: #333333;
		}
		.shoppCar_con{
			padding: 24rpx;
			.technicianName{
				font-size: 30rpx;
				font-weight: 600;
				color: #333333;
			}
			.list_con{
				margin: 10rpx 0;
				font-size:25rpx;
				.integral{
					color: #FE4D4F;
					text{
						margin: 0 5rpx;
					}
					.interal_title{
						font-size:35rpx;
						font-weight:700;
					}
				}
			}
			.img{
				width: 128rpx;
				height: 128rpx;
				margin-right: 24rpx;
			}
		}
	}
</style>